<template>
  <base-button-group
    @insert-entity="insertEntity"
    @delete-entity="deleteEntity"
    @search-entity="searchEntity"
    @reset-search-entity="resetSearchEntity"
  ></base-button-group>

  <n-data-table
    :columns="columns"
    :data="entityStore.entityList"
    :row-key="(row) => row.id"
    v-model:checked-row-keys="checkedRowKeys"
    :loading="entityTableLoading"
    :scroll-x="computedScrollX(columns)"
  ></n-data-table>
  <base-name-dialog
    v-model:show="entityStore.dialogVisible"
    :entity-name="props.parentEntityName"
  >
  </base-name-dialog>
</template>

<script lang="ts" setup>
import { computedScrollX } from "@/utils/computed/TableComputed";
import { NButton } from "naive-ui";
import BaseNameDialog from "./BaseNameDialog.vue";
import BaseButtonGroup from "../BaseButtonGroup.vue";
import { getEntityStore } from "@/handle/views/base/GetEntityStore";
import { getBaseApi } from "@/handle/views/base/GetBaseApi";
import { getEntity } from "@/handle/views/base/GetEntity";

const props = defineProps<{
  parentEntityName: string; //实体类名
}>();

const entityStore = getEntityStore(props.parentEntityName);
const curEntity = getEntity(props.parentEntityName);
const entityApi = getBaseApi(props.parentEntityName);

const entityTableLoading = ref(false);

const columns = ref([
  {
    title: "勾选框",
    key: "selection",
    width: 30,
    type: "selection",
    fixed: "left",
  },
  {
    title: "序号",
    key: "key",
    width: 30,
    render: (_: never, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "ID",
    width: 30,
    key: "id",
    ellipsis: {
      tooltip: true,
    },
    align: "center",
  },
  {
    title: "编码",
    width: 60,
    key: "baseNo",
    ellipsis: {
      tooltip: true,
    },
    align: "center",
  },
  {
    title: "名称",
    width: 130,
    key: "name",
    ellipsis: {
      tooltip: true,
    },
    align: "center",
  },
  {
    title: "编辑",
    key: "edit",
    width: "80",
    fixed: "right",
    render(row: any) {
      return h(
        NButton,
        {
          strong: true,
          onClick: () => {
            entityStore.dialogCategory = "编辑";
            entityStore.setEntitySelectedRow(row);
            entityStore.openDialog();
          },
        },
        { default: () => "编辑" }
      );
    },
  },
]);

const getEtityList = () => {
  try {
    entityTableLoading.value = true;
    entityStore.setEntityList(curEntity);
  } catch (e) {
    message.error("查询失败!");
  } finally {
    entityTableLoading.value = false;
  }
};
getEtityList();

//新增
const insertEntity = () => {
  entityStore.dialogCategory = "新增";
  entityStore.setEntitySelectedRow(curEntity);
  entityStore.openDialog();
};

//查询
const searchEntity = () => {
  entityStore.dialogCategory = "查询";
  entityStore.setEntitySelectedRow(curEntity);
  entityStore.openDialog();
};

//删除
const dialog = useDialog();
const message = useMessage();
const checkedRowKeys = ref([]);
const deleteEntity = () => {
  dialog.warning({
    title: "提示",
    content:
      "确定删除选中的" +
      checkedRowKeys.value.length +
      "条数据？（警告！删除后无法恢复！）",
    positiveText: "确定",
    onPositiveClick: () => {
      entityApi
        .deleteEntityById(checkedRowKeys.value)
        .then(() => {
          message.success("删除成功!");
          entityStore.setEntityList(curEntity);
          checkedRowKeys.value = [];
        })
        .catch(() => {
          message.error("系统错误, 请联系管理员");
        });
    },
    negativeText: "取消",
    maskClosable: false,
    closable: false,
  });
};

//重置查询
const searchForm = ref(curEntity);
const resetSearchEntity = () => {
  searchForm.value = curEntity;
  entityStore.setEntityList(curEntity);
};
</script>

<style scoped></style>
